<template>
    <div class="sidebar-container">
        <div class="sidebar-menu-container">
            <Menu class="sidebar-menu" width="230px" :active-name="openlist" :open-names="checklist" accordion>
                <Submenu name="1" class="sidebar-menu-submenu" v-if="authCheck('ZB10-10')">
                    <template slot="title" class="sidebar-menu-submenu-title">
                        <img src="/images/sidebar/icon_1_1.png" alt="">
                        <p>值班管理</p>
                    </template>
                    <router-link :to="{ path: '/watchManagement/index',query:{name:'1_1'}}"
                                 v-if="authCheck('ZB10-10-10')">
                        <Menu-item name="1_1">
                            <p>大队值班管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/watchManagement/gasDuty',query:{name:'1_2'}}"
                                 v-if="authCheck('ZB10-10-11')">
                        <Menu-item name="1_2">
                            <p>气防站值班管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/watchManagement/fireMission',query:{name:'1_3'}}"
                                 v-if="authCheck('ZB10-10-12')">
                        <Menu-item name="1_3">
                            <p>火警任务</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/watchManagement/fireMissionEdit',query:{name:'1_4'}}"
                                 v-if="authCheck('ZB10-10-13')">
                        <Menu-item name="1_4">
                            <p>火警任务管理</p>
                        </Menu-item>
                    </router-link>
                </Submenu>

                <Submenu name="2" class="sidebar-menu-submenu" v-if="authCheck('SP10-11')">
                    <template slot="title" class="sidebar-menu-submenu-title">
                        <img src="/images/sidebar/icon_2_1.png" alt="">
                        <p>视频监控</p>
                    </template>
                    <router-link :to="{ path: '/surveillanceManagement/index',query:{name:'2_1'}}" v-if="authCheck('SP10-11-10')">
                        <Menu-item name="2_1">
                            <p>视频监控管理</p>
                        </Menu-item>
                    </router-link>
<!--                    <router-link :to="{ path: '/surveillanceManagement/index',query:{name:'2_2'}}"
                                 v-if="authCheck('10-10-11')">
                        <Menu-item name="2_2">
                            <p>视频监控</p>
                        </Menu-item>
                    </router-link>-->
                </Submenu>

                <Submenu name="3" class="sidebar-menu-submenu" v-if="authCheck('XF10-12')">
                    <template slot="title" class="sidebar-menu-submenu-title">
                        <img src="/images/sidebar/icon_3_1.png" alt="">
                        <p>消防管理</p>
                    </template>
                    <router-link :to="{path: '/fireManagement/index',query:{name:'3_1'}}" v-if="authCheck('XF10-12-10')">
                        <Menu-item name="3_1">
                            <p>车辆信息管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{path: '/fireManagement/vehicleStateMg',query:{name:'3_2'}}"
                                 v-if="authCheck('XF10-12-11')">
                        <Menu-item name="3_2">
                            <p>车辆状态管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{path: '/fireManagement/theVehicleMg',query:{name:'3_3'}}"
                                 v-if="authCheck('XF10-12-12')">
                        <Menu-item name="3_3">
                            <p>消防人员管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{path: '/fireManagement/registrationMg',query:{name:'3_4'}}"
                                 v-if="authCheck('XF10-12-13')">
                        <Menu-item name="3_4">
                            <p>物资器材登记管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{path: '/fireManagement/suppliesEquipmentMg',query:{name:'3_5'}}"
                                 v-if="authCheck('XF10-12-14')">
                        <Menu-item name="3_5">
                            <p>物资器材领取管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{path: '/fireManagement/Fire-fightingPreplanInfoMg',query:{name:'3_6'}}"
                                 v-if="authCheck('XF10-12-15')">
                        <Menu-item name="3_6">
                            <p>灭火预案信息管理</p>
                        </Menu-item>
                    </router-link>
                </Submenu>

                <Submenu name="4" class="sidebar-menu-submenu" v-if="authCheck('YJ10-13')">
                    <template slot="title" class="sidebar-menu-submenu-title">
                        <img src="/images/sidebar/icon_4_1.png" alt="">
                        <p>应急物资管理</p>
                    </template>
                    <router-link :to="{ path: '/emergencyManagement/index' ,query:{name:'4_1'}}"
                                 v-if="authCheck('YJ10-13-10')">
                        <Menu-item name="4_1">
                            <p>应急物资储备点管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/emergencyManagement/register' ,query:{name:'4_2'}}"
                                 v-if="authCheck('YJ10-13-11')">
                        <Menu-item name="4_2">
                            <p>应急物资登记管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/emergencyManagement/checkout' ,query:{name:'4_3'}}"
                                 v-if="authCheck('YJ10-13-12')">
                        <Menu-item name="4_3">
                            <p>应急物资检验管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/emergencyManagement/gismap' ,query:{name:'4_4'}}"
                                 v-if="authCheck('YJ10-13-13')">
                        <Menu-item name="4_4">
                            <p>GIS地图展示</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/emergencyManagement/gismapEdit' ,query:{name:'4_5'}}"
                                 v-if="authCheck('YJ10-13-14')">
                        <Menu-item name="4_5">
                            <p>GIS地图编辑</p>
                        </Menu-item>
                    </router-link>
                </Submenu>

                <Submenu name="5" class="sidebar-menu-submenu" v-if="authCheck('RY10-14')">
                    <template slot="title" class="sidebar-menu-submenu-title">
                        <img src="/images/sidebar/icon_5_1.png" alt="">
                        <p>人员专家管理</p>
                    </template>
                    <router-link :to="{ path: '/specialistManagement/index',query:{name:'5_1'} }"
                                 v-if="authCheck('RY10-14-10')">
                        <Menu-item name="5_1">
                            <p>应急通讯管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/specialistManagement/emergencyPersonnel',query:{name:'5_2'} }"
                                 v-if="authCheck('RY10-14-11')">
                        <Menu-item name="5_2">
                            <p>应急人员通讯录</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/specialistManagement/emergencySpecialist',query:{name:'5_3'} }"
                                 v-if="authCheck('RY10-14-12')">
                        <Menu-item name="5_3">
                            <p>应急专家管理</p>
                        </Menu-item>
                    </router-link>
                </Submenu>

                <Submenu name="6" class="sidebar-menu-submenu" v-if="authCheck('XT10-15')">
                    <template slot="title" class="sidebar-menu-submenu-title">
                        <img src="/images/sidebar/icon_6_1.png" alt="">
                        <p>系统管理</p>
                    </template>
                    <router-link :to="{ path: '/systemManagement/index',query:{name:'6_1'} }"
                                 v-if="authCheck('XT10-15-10')">
                        <Menu-item name="6_1">
                            <p>组织机构列表管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/systemManagement/dictionary',query:{name:'6_2'}}"
                                 v-if="authCheck('XT10-15-11')">
                        <Menu-item name="6_2">
                            <p>字典数据维护</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/systemManagement/roleManage',query:{name:'6_3'} }"
                                 v-if="authCheck('XT10-15-12')">
                        <Menu-item name="6_3">
                            <p>角色管理</p>
                        </Menu-item>
                    </router-link>
                    <router-link :to="{ path: '/systemManagement/SMSTemplate',query:{name:'6_4'} }"
                                 v-if="authCheck('XT10-15-13')">
                        <Menu-item name="6_4">
                            <p>短信模板管理</p>
                        </Menu-item>
                    </router-link>
                </Submenu>

            </Menu>
        </div>

    </div>
</template>
<script>
    // var ezjsUtil = Vue.ezjsUtil;
    // var apiConstants = ezjsUtil.constants.api;

    export default {
        props: ['openlist', 'checklist'],
        data() {
            return {
                companyLogoImg: '',
                companyLogo: CURRENT_LEADER.companyLogo,
                companyName: CURRENT_LEADER.companyName,
                theme2: 'dark',
                rolesArray: CURRENT_LEADER.roles,
                rolesArrayTwo: [],
                rolesMark: [],
                arr2: [true, false]
            }
        },
        created: function () {
            var _this = this;
            //_this.rolesArray.split
            if (_this.companyLogo != null) {
                _this.companyLogoImg = ezjsUtil.nfsUtil.getFileUrl(_this.companyLogo);
            } else {
                _this.companyLogoImg = '/images/sidebar/zsh-logo.png'
            }
        },

    }
</script>

<style lang="less">
    .ivu-menu {
        background: #cecece;
    }

    a {
        color: #646464;
    }

    .sidebar-container {

    .sidebar-logo {
        width: 230px;
        height: 120px;
        background-color: #ec8f0e;
        position: relative;

    .sidebar-logo-inside {
        position: absolute;
        width: 110px;
        height: 80px;
        top: 20px;
        left: 60px;
        color: #fff;
        font-weight: bold;

    img {
        width: 52px;
        height: 52px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    p {
        text-align: center;
        margin-top: 10px;
    }

    }
    }
    .sidebar-menu-container {

    .sidebar-menu {
        margin-top: 20px;
        background-color: #ebeef3;

    .sidebar-menu-title {
        width: 230px;
        height: 32px;

    img {
        display: block;
        width: 20px;
        height: 20px;
        float: left;
        margin-top: 6px;
        margin-left: 22px;
        margin-right: 15px;
    }

    p {
        display: block;
        font-size: 15px;
        color: #ec8f0e;
        height: 32px;
        line-height: 32px;
    }

    }
    .sidebar-menu-item {
        height: 40px;
        width: 230px;
        padding: 0 0 0 22px;

    p {
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        padding-left: 35px;
        background-repeat: no-repeat;
        background-position: 0 center;
        color: #6d6d6d;
    }

    p:hover {
        color: #fff;
    }

    }
    .sidebar-menu-item:hover {
        background-color: #3299ff;
        color: #fff;
    }

    .ivu-menu-item-selected,
    .ivu-menu-item-selected:hover {
        background: #3299ff;
        color: #fff !important;
        border: none !important;
    }

    .sidebar-menu-submenu {

    .sidebar-menu-submenu-title,
    .ivu-menu-submenu-title {
        padding: 0 !important;
        width: 230px;
        height: 40px;

    img {
        display: block;
        width: 20px;
        height: 20px;
        float: left;
        margin-top: 10px;
        margin-left: 22px;
        margin-right: 7px;
    }

    p {
        display: block;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        color: #555;
    }

    .ivu-menu-submenu-title-icon {
        top: -30px;
        right: 30px;
    }

    }
    .sidebar-menu-submenu-title:hover,
    .ivu-menu-submenu-title:hover {
        background: #3299ff !important;
        color: #fff;
    }

    .ivu-menu-item {
        padding: 0 0 0 60px;
        height: 40px;
        border: none;

    p {
        height: 40px;
        line-height: 40px;
        /*color: #6d6d6d;*/
    }

    p:hover {
        color: #fff;
    }

    }
    .ivu-menu-item:hover {
        background-color: #3299ff;
        color: #fff;
    }

    .ivu-menu-item-selected,
    .ivu-menu-item-selected:hover {
        background: #3299ff;
        color: #fff !important;
        border: none !important;
    }

    }
    }
    }
    }
</style>
